<template>
    <div class="about-us">
      <!-- 返回首页按钮 -->
      <button class="home-button" @click="goToHome">返回首页</button>
  
      <!-- 页面标题 -->
      <h1 class="page-title">关于“愈见希望”</h1>
  
      <!-- 公司简介 -->
      <div class="section intro-section">
        <div class="intro-content">
          <img src="../assets/logo1.png" class="page-logo">
          <div class="mission-content">
            <h2 class="section-title">我们的使命</h2>
            <p class="section-content">
              “愈见希望”是一个为病友提供温暖和支持的社区。我们致力于通过智能化的AI小助手和全面的病友交流论坛，帮助患者获取丰富的经验，携手同行，紧密交流、陪伴与联系，凝结出名为“生”的希望。
            </p>
            <p class="section-content">
              我们的平台不仅提供专业的医疗信息，还通过AI技术为患者提供个性化的健康建议。无论是疾病管理、心理支持，还是日常生活中的小贴士，我们都希望为每一位用户带来实实在在的帮助。
            </p>
          </div>
        </div>
      </div>
  
      <!-- 其他部分保持不变 -->
      <!-- 团队介绍 -->
      <div class="section team-section">
        <h2 class="section-title">我们的团队</h2>
        <div class="team-members">
          <div v-for="(member, index) in teamMembers" :key="index" class="member-card">
            <img :src="member.avatar" :alt="member.name" class="member-avatar" />
            <h3 class="member-name">{{ member.name }}</h3>
            <p class="member-role">{{ member.role }}</p>
            <p class="member-bio">{{ member.bio }}</p>
          </div>
        </div>
      </div>
  
      <!-- 网站特色 -->
      <div class="section features-section">
        <h2 class="section-title">网站特色</h2>
        <div class="features">
          <div class="feature-card">
            <i class="fas fa-robot feature-icon"></i>
            <h3 class="feature-title">智能AI助手</h3>
            <p class="feature-description">我们的AI助手能够24/7为您提供个性化的健康建议和疾病管理方案。</p>
          </div>
          <div class="feature-card">
            <i class="fas fa-users feature-icon"></i>
            <h3 class="feature-title">病友社区</h3>
            <p class="feature-description">加入我们的病友社区，与志同道合的朋友分享经验，互相支持。</p>
          </div>
          <div class="feature-card">
            <i class="fas fa-book-medical feature-icon"></i>
            <h3 class="feature-title">专业医疗信息</h3>
            <p class="feature-description">我们提供最新的医疗信息和健康资讯，帮助您更好地管理健康。</p>
          </div>
        </div>
      </div>
  
      <!-- 联系方式 -->
      <div class="section contact-section">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-info">
          <p><strong>地址：</strong>北京市朝阳区健康路123号</p>
          <p><strong>电话：</strong>010-12345678</p>
          <p><strong>邮箱：</strong>support@yujianxiwang.com</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AboutUs',
    data() {
      return {
        // 团队成员数据
        teamMembers: [
          {
            name: '张三',
            role: '创始人 & CEO',
            bio: '拥有10年健康管理经验，致力于推动健康科技的发展。',
            avatar: require('@/assets/avatar1.jpg'), // 假设图片放在src/assets目录下
          },
          {
            name: '李四',
            role: '技术总监',
            bio: '技术专家，专注于AI与健康领域的结合。',
            avatar: require('@/assets/avatar1.jpg'),
          },
          {
            name: '王五',
            role: '社区经理',
            bio: '负责病友社区的运营与管理，为患者提供温暖的交流环境。',
            avatar: require('@/assets/avatar1.jpg'),
          },
        ],
      };
    },
    methods: {
      // 返回首页的方法
      goToHome() {
        this.$router.push('/Index'); // 假设首页的路由是 '/'
      },
    },
  };
  </script>
  
  <style scoped>
  /* 全局样式 - 医疗健康风格 */
  body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #f5f9fc;
    color: #2d3748;
    line-height: 1.6;
  }
  
  /* 主容器 - 增强视觉层次 */
  .about-us {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    position: relative;

    background-size: cover;
    background-position: center;
  }
  
  /* 返回按钮 - 医疗风格 */
  .home-button {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 25px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
    border: none;
    border-radius: 30px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(74, 175, 254, 0.3);
    transition: all 0.3s;
  }
  
  .home-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 175, 254, 0.4);
    background: linear-gradient(135deg, #3fa1f7, #00d9e6);
  }
  
  /* 标题样式 */
  .page-title {
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1rem;
  }
  
  .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #4facfe, #00f2fe);
  }
  
  /* 内容区块 */
  .section {
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.85);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
  }
  
  .section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  /* 简介区域 */
  .intro-content {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  
  .page-logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ebf8ff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .section-title {
    font-size: 1.8rem;
    color: #3498db;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #ebf8ff;
  }
  
  .section-content {
    font-size: 1.1rem;
  color: #4a5568;
  margin-bottom: 1.2rem;
  line-height: 1.8;
  text-align: left; /* 显式左对齐 */
  text-indent: 2em; /* 首行缩进2个字符 */
  }
  
  /* 团队成员 */
  .team-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
  
  .member-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s;
  }
  
  .member-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  
  .member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    border: 3px solid #4facfe;
    transition: all 0.3s;
  }
  
  .member-avatar:hover {
    transform: scale(1.1);
  }
  
  .member-name {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .member-role {
    color: #4facfe;
    font-weight: 500;
    margin-bottom: 1rem;
  }
  
  .member-bio {
    color: #718096;
    line-height: 1.6;
  }
  
  /* 特色功能 */
  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
  
  .feature-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s;
  }
  
  .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  
  .feature-icon {
    font-size: 3rem;
    color: #4facfe;
    margin-bottom: 1.5rem;
  }
  
  .feature-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .feature-description {
    color: #718096;
    line-height: 1.6;
  }
  
  /* 联系方式 */
  .contact-info {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.8;
  }
  
  .contact-info p {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .contact-info p::before {
    content: '→';
    margin-right: 0.5rem;
    color: #4facfe;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .about-us {
      padding: 1.5rem;
    }
    
    .intro-content {
      flex-direction: column;
      text-align: center;
    }
    
    .page-logo {
      margin-bottom: 1.5rem;
    }
  }
  </style>